---
import type { GetStaticPaths } from 'astro'
import type { CollectionEntry } from 'astro:content'
import { getCollection } from 'astro:content'
import MarkdownLayout from '@/layouts/MarkdownLayout.astro'
import PageLayout from '@/layouts/PageLayout.astro'
import Highlight from '@/components/Highlight.astro'
import SectionBlock from '@/components/SectionBlock.astro'
import MarkdownWrapper from '@/components/MarkdownWrapper.astro'
import FriendList from '@/components/FriendList.astro'
import ProjectList from '@/components/ProjectList.astro'
import { ReadingProgress } from '@/components/post/ReadingProgress'
import { PostToc } from '@/components/post/PostToc'
import { Comments } from '@/components/comment'

export const getStaticPaths = (async () => {
  const specList = await getCollection('spec')

  return specList.map((md) => ({
    params: { spec: md.slug },
    props: {
      md,
    },
  }))
}) satisfies GetStaticPaths

interface Props {
  md: CollectionEntry<'spec'>
}

const { md } = Astro.props

const { headings, Content } = await md.render()

const isPageLayout = ['friends', 'projects'].includes(md.slug)
const isMdContentEmpty = md.body.trim().length === 0
---

{
  isPageLayout ? (
    <PageLayout title={md.data.title} description={md.data.description}>
      <div class="max-w-[800px] mx-auto px-4 py-16 space-y-8" data-pagefind-body>
        <header class="space-y-4">
          <h1 class="text-4xl font-bold">
            <Highlight>{md.data.title}</Highlight>
          </h1>
          <p>{md.data.description}</p>
        </header>
        {md.slug === 'friends' && <FriendList />}
        {md.slug === 'projects' && <ProjectList />}
        {!isMdContentEmpty && (
          <MarkdownWrapper>
            <Content />
          </MarkdownWrapper>
        )}
        {md.data.comments && <Comments />}
      </div>
    </PageLayout>
  ) : (
    <MarkdownLayout
      title={md.data.title}
      description={md.data.description}
      mdTitle={md.data.title}
      mdDescription={md.data.description}
      mdSlug={md.slug}
    >
      <div
        class="max-w-[1100px] mx-auto px-4 md:px-8 py-16 grid lg:grid-cols-[auto_260px] gap-8"
        data-pagefind-body
      >
        <div>
          <header class="space-y-4">
            <h1 class="text-4xl font-bold">
              <Highlight>{md.data.title}</Highlight>
            </h1>
            <p>{md.data.description}</p>
          </header>
        </div>
        <div class="col-start-1 min-w-0">
          <MarkdownWrapper>
            <Content />
          </MarkdownWrapper>
        </div>
        <div class="hidden lg:block" data-pagefind-ignore>
          <aside class="sticky top-20">
            <SectionBlock title="目录">
              <PostToc headings={headings} client:idle />
              <hr class="my-2 border-primary max-w-[100px]" />
              <ReadingProgress client:idle />
            </SectionBlock>
          </aside>
        </div>
        {md.data.comments && <Comments />}
      </div>
    </MarkdownLayout>
  )
}
